<template>
    <div>
        <headerSetCom style="margin-bottom: 0.3rem;">
            <template #title-content>
                <span>修改密码</span>
            </template>
        </headerSetCom>

        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="phone" :disabled="true" name="用户名" label="手机号" placeholder="手机号"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="oldPassword" type="password" name="密码" label="密码" placeholder="请填写密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
                <van-field v-model="newPassword" type="password" name="密码" label="确认密码" placeholder="请再次填写新密码"
                    :rules="[{ required: true, message: '请再次填写新密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" style="background-color: #cccccc; border: none;">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { changePasswordFn } from '@/API/user';
import { showToast } from 'vant';
const phone = ref(localStorage.getItem('phone') as string)
const oldPassword = ref()
const newPassword = ref()

import headerSetCom from '@/components/headerSetCom/headerSetCom.vue';
import router from '@/router';

function onSubmit() {
    if (oldPassword.value !== localStorage.getItem('password')) {
        showToast('旧密码错误');

    } else if (newPassword.value == localStorage.getItem('password')) {
        showToast('不能用旧密码');
    }else {
        changePasswordFn({
            phone_number: Number(phone.value),
            oldPassword: oldPassword.value,
            newPassword: newPassword.value,
        }).then(res => {
            console.log(res)
            if (res.status == 200) {
                showToast(res.data.message);
                setTimeout(()=>{
                    router.push('/login')
                },500)
            }
        }).catch((err) => {
            console.log(err)
        })


        localStorage.setItem('password', newPassword.value)
    }
    console.log(phone.value, oldPassword.value, newPassword.value)


}
</script>